export function loadNavbar() {
    // 创建顶栏的HTML内容
    const navbarHTML = `
        <header>
            <div id="logo_container">
                <a id="logo">Netflix</a>
            </div>
            <div id="user">
                <a><img src="/img/grade.png" alt="grade" class="icon" style="z-index: 1;" id="grade"></a>
                <a><img src="/img/search.png" alt="search" class="icon" id="search"></a>
                <a><img src="/img/history.png" alt="history" class="icon" id="history"></a>
                <a href="vip"><img src="/img/vip.png" alt="vip" class="icon"></a>
                <div id="user2">
                    <img src="/img/user_img.png" alt="用户头像" id="user_img" style="z-index: 1;">
                    <div id="dropdown" class="dropdown-content" style="font-size: 13px">
                        <div id="username_display">未登录</div>
                        <a href="/toRegister">注册</a>
                        <a href="/toLogin">登录</a>
                        <a href="/logout">退出</a>
                    </div>
                </div>
                
            </div>
        </header>
    `;
    // 将顶栏内容插入到页面中的一个特定位置
    const navbarContainer = document.getElementById('navbarContainer');
    if (navbarContainer) {
        navbarContainer.innerHTML = navbarHTML;
    } else {
        console.error('Navbar container element not found.');
    }

    // 添加 Logo 点击事件监听器
    const logoLink = document.getElementById("logo");
    if (logoLink) {
        logoLink.addEventListener("click", function(event) {
            event.preventDefault(); // 阻止默认行为，即阻止链接跳转
            window.location.href = "/index"; // 替换为你要跳转的页面的实际 URL
        });
    }

    // 添加 Grade 图片点击事件监听器
    const gradeLink = document.getElementById("grade");
    if (gradeLink) {
        gradeLink.addEventListener("click", function(event) {
            event.preventDefault(); // 阻止默认行为，即阻止链接跳转
            window.location.href = "/grade"; // 替换为你要跳转的页面的实际 URL
        });
    }

    // 添加 search 图片点击事件监听器
    const searchLink = document.getElementById("search");
    if (searchLink) {
        searchLink.addEventListener("click", function(event) {
            event.preventDefault(); // 阻止默认行为，即阻止链接跳转
            window.location.href = "/search"; // 替换为你要跳转的页面的实际 URL
        });
    }

    // 添加 history 图片点击事件监听器
    const historyLink = document.getElementById("history");
    if (historyLink) {
        historyLink.addEventListener("click", function(event) {
            event.preventDefault(); // 阻止默认行为，即阻止链接跳转
            window.location.href = "/history"; // 替换为你要跳转的页面的实际 URL
        });
    }
}

// 在页面加载时检查用户是否已登录，并更新 username_display
window.addEventListener("load", function() {
    checkLoginStatus();
});

// 检查用户登录状态的函数
function checkLoginStatus() {
    fetch("/checkLoginStatus") // 假设这个请求会返回用户的登录状态信息
        .then(response => response.json())
        .then(data => {
            if (data.loggedIn) {
                updateUsernameDisplay(data.username);
                updateUserAvatar();
            } else {
                updateUsernameDisplay("未登录");
            }
        })
        .catch(error => {
            console.error("Error checking login status:", error);
        });
}
// 更新用户名显示的函数
function updateUsernameDisplay(username) {
    const usernameDisplay = document.getElementById("username_display");
    if (usernameDisplay) {
        usernameDisplay.textContent = username;
    }
}

function updateUserAvatar(){
    const userAvatar = document.getElementById("user_img");
    if (userAvatar){
        userAvatar.src = "/img/user_img2.png";
    }
}
